<template>
	<view>
		<navbar title="美团外卖返利" color="#fff" bgColor="transparent" :isZhanwei="false"></navbar>
		<view class="head-box" :style="{background:`url('${imgs.home.mtwm}')`}">
			<view class="logo">
				<image :src="imgs.logos.mtwm" mode=""></image>
			</view>
			<view class="text">领红包，拿返现</view>
			<!-- 			<view class="search-box">
				<view class="left-box">
					<u-icon color="#CCCCCC" style="margin-right: 16rpx;" name="search"></u-icon>
					<text>搜索美团商品</text>
				</view>
				<view class="right-box">
					搜索
				</view>
			</view> -->
			<view class="setup-box">
				<view class="setup-title">点外卖，返现金</view>
				<view class="setups">
					<view class="item">
						<image :src="imgs.logos.lhb" mode=""></image>
						<view class="item-info">
							<view>点击下方按钮</view>
							<view>领取红包</view>
						</view>
					</view>
					<view class="items">
						<image :src="imgs.arrow" mode=""></image>
					</view>
					<view class="item">
						<image :src="imgs.logos.mtwm" mode=""></image>
						<view class="item-info">
							<view>跳转到美团</view>
							<view>点外卖</view>
						</view>
					</view>
					<view class="items">
						<image :src="imgs.arrow" mode=""></image>
					</view>
					<view class="item">
						<image :src="imgs.logo" mode=""></image>
						<view class="item-info">
							<view>回名购岛领返现</view>
							<view>（均返1.5元）</view>
						</view>
					</view>
				</view>

				<div class="setup-btn" @click="goMt">
					领红包
				</div>
			</view>
		</view>

		<div class="good-boxs">
			<div class="in-box">
				<div class="title">《美团外卖返现规则》</div>
				<text>
					1.只有下单时使 用了【通过名购岛App领取的美团红包】的订单才可以拿到返利和抽奖补贴，不符合上述条件的无法拿到返利;<br/>
					<br/>
					2.红包仅限非到店自取外卖订单，下午茶、夜宵、美食、蛋糕、团餐频道、甜点饮品频道使用；<br/>
					<br/>
					3.返利以实付金额为准，最高返利实付金额的4.8%红包会在48小时之内到账。
				</text>
			</div>
		</div>
	</view>
</template>

<script>
	import imgs from '@/utils/imgs.js'
	import good from '../components/good/index.vue'
	import navbar from '../components/w-navbar/index.vue'
	export default {
		components: {
			navbar,
			good
		},
		data() {
			return {
				imgs,
			};
		},
		methods: {
			async goMt() {
				const isHaveMt = plus.runtime.isApplicationExist({
					pname: 'com.sankuai.meituan'
				})
				if (!isHaveMt) {
					uni.showToast({
						title: '请先下载美团APP',
						icon: 'none'
					})
					return
				}

				const res = await this.$api.mtwmApi.getSortLink()
				plus.runtime.openURL(res.data.link, () => {
					uni.showToast({
						title: '未找到打开此链接的APP',
						icon: 'none'
					})
				})
			}
		},
		onShow() {}
	}
</script>

<style lang="scss" scoped>
	.head-box {
		height: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		// box-sizing: border-box;
		// padding-top: 180rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-bottom: 24rpx;

			>image {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-bottom: 24rpx;
		}

		.search-box {
			width: 630rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			padding: 8rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.left-box {
				font-weight: 500;
				font-size: 28rpx;
				color: #CCCCCC;
			}

			.right-box {
				width: 160rpx;
				height: 56rpx;
				background: #FF8C19;
				border-radius: 36rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
			}
		}

		.setup-box {
			position: absolute;
			bottom: -180rpx;
			width: 702rpx;
			height: 408rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			.setup-btn {
				width: 556rpx;
				height: 72rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				// background-image: linear-gradient(#FD7830 to #FD7830);
				// background-image: linear-gradient();
				background: linear-gradient(#FD7830 50%, #FD7830 50%);
				border-radius: 36rpx;
			}

			.setup-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333130;
				margin-bottom: 40rpx;
			}

			.setups {
				display: flex;
				align-items: center;
				margin-bottom: 102rpx;

				>.item {
					flex: 1;
					margin-right: 18rpx;
					position: relative;

					>image {
						width: 96rpx;
						height: 96rpx;
					}

					>.item-info {
						position: absolute;
						bottom: -70rpx;
						font-weight: 400;
						font-size: 24rpx;
						left: -50%;
						width: 200rpx;
						color: #666260;
						text-align: center;

						>view {
							>text {
								color: #FF8C19;
							}
						}
					}
				}

				.items {
					flex: 1;
					margin-right: 18rpx;

					>image {
						width: 86rpx;
						height: 20rpx;
					}
				}
			}
		}
	}


	.good-boxs {
		margin-top: 220rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		.in-box{
			width: 702rpx;
			height: 452rpx;
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			.title {
				font-weight: bolder;
				font-size: 36rpx;
				color: #333130;
				text-align: center;
				margin-bottom: 36rpx;
			}
		}
	
	}
</style>